<template>
  <section class="app">

<!--    带border-->
    <div>外框</div>
    <div style="width:100%;">
      <xt-table ref="list" type="default" :data="list" border @add="handleAdd" @selection-change="handleSelectionChange" :rules="rules"
                @submit="handleSubmit" @success="submitData" @delete="deleteData" :rowDeleteMethod="rowDeleteMethod" emptyText="测试">
      <xt-table-column
        type="selection"
        width="55">
      </xt-table-column>
      <xt-table-column
        type="index"
        width="55">
      </xt-table-column>
<!--      <xt-table-column type="expand" label="展开">-->
<!--        <template slot-scope="props">-->
<!--          {{props.row}}-->
<!--        </template>-->
<!--      </xt-table-column>-->
      <xt-table-column prop="name" label="姓名1" :show-overflow-tooltip="true" clearable @focus="handleFocus" @blur="handleBlur" @change="handleChange"></xt-table-column>
      <xt-table-column prop="sex" label="性别" prop-type="select" :show-overflow-tooltip="false" :options="[{id: '男', label: '男'}, {id: '女', label: '女'}]">
        <template slot-scope="scope">
          <el-select v-model="scope.row.sex" size="mini">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </template>
      </xt-table-column>
      <xt-table-column prop="birth" prop-type="date" label="出生年月" :show-overflow-tooltip="false" width="200" valueFormat="yyyy-MM-dd hh:mm"></xt-table-column>
      <xt-table-column prop="age" prop-type="number" label="年龄" :show-overflow-tooltip="false" :min="-5" :max="9999" :maxlength="4" @focus="handleFocus" @blur="handleBlur" @change="handleChange"></xt-table-column>
      <!-- @input="handleInput"  -->
      <xt-table-column prop="merry" prop-type="checkbox" label="是否已婚" :show-overflow-tooltip="false"></xt-table-column>
<!--      <xt-table-column prop="materialCode" prop-type="number" label="标题测试长度" :show-overflow-tooltip="false"></xt-table-column>-->
<!--      <xt-table-column prop="materialId" label="原料名称" propType="select" :options="materialList" :props="{label:'name',value:'id',labelProp:'materialName', disabled: true}" @change="materialChange" remote :remote-method="remoteMethod"  :loading="loading.selectLoading" filterable loading-text="测试中" width="100"></xt-table-column>-->
      <xt-table-column label="操作" type="operation">
        <template slot-scope="scope" slot="left">
          <div @click="handleEdit(scope, scope.row)">left测试</div>
        </template>
        <template slot-scope="scope" slot="right">
          <div @click="handleCancel(scope, scope.row)">right测试</div>
        </template>
      </xt-table-column>
    </xt-table>
    </div>

    

    <button @click="handleSubmitAll">全部提交</button>
    <button @click="handleCancelAll">全部取消</button>
    <button @click="handleCancelAllSelection">全部取消选择</button>
    <button @click="handleToggleSelection">手动选中第一、第三行</button>

    <div>

<!--      select-->
<!--      <fieldset>-->
<!--        <legend>xt-select选择框</legend>-->
<!--        <xt-select v-model="selectValue">-->
<!--          <xt-option label="默认" value="1"></xt-option>-->
<!--          <xt-option label="默认" value="1"></xt-option>-->
<!--          <xt-option label="默认" value="1"></xt-option>-->
<!--          <xt-option label="默认" value="1"></xt-option>-->
<!--          <xt-option label="默认" value="1"></xt-option>-->
<!--          <xt-option label="默认" value="1"></xt-option>-->
<!--          1111-->
<!--        </xt-select>-->

<!--        <el-select v-model="selectValue" clearable>-->
<!--          <el-option label="默认" value="1" disabled></el-option>-->
<!--          <el-option label="默认" value="1"></el-option>-->
<!--          <el-option label="默认" value="1"></el-option>-->
<!--          <el-option label="默认" value="1"></el-option>-->
<!--          <el-option label="默认" value="1"></el-option>-->
<!--          <el-option label="默认" value="1"></el-option>-->
<!--          <el-option label="默认" value="1"></el-option>-->
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </fieldset>-->

<!--tag标签-->
      <fieldset>
        <legend>tag标签</legend>
        <xt-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @click="handleClick"
          @close="handleClose(tag)">
          {{tag}}
        </xt-tag>
      </fieldset>

<!--  xt-check-->
      <fieldset>
        <legend>xt-check多选框</legend>
        <xt-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</xt-checkbox>
        <div style="margin: 15px 0;"></div>
        <xt-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" size="mini">
          <xt-checkbox v-for="city in cities" :label="city" :key="city" border :trueLabel="city" falseLabel="5656">{{city}}</xt-checkbox>
        </xt-checkbox-group>
      </fieldset>

      <div>898989</div>
      <div>898989</div>
      <div>898989</div>
      <div>898989</div>
      <div @click="handleClick">898989</div>
      <xt-input-number type="number" v-model="aaaa" :maxlength="5"></xt-input-number>

    </div>
  </section>
</template>
<script>

/*#region 导入函数*/
import Mock from "./mock.js";

/*#endregion*/

export default{
  name: "App",
  componentName: "App",
  methods: {

    /*#region 自定义函数(组件change事件等)*/
    rowDeleteMethod() {
      return false;
    },
    renderHeader(h, { column, $index }) {
      console.log(h, column, $index);
      return "ceshi";
    },
    materialChange(value, row, item) {
      console.log(value, row, item, "change");
    },
    remoteMethod(query) {
      this.loading.selectLoading = true;
      console.log(query, "query");
      setTimeout(() => {
        this.loading.selectLoading = false;
        this.materialList = Mock.material.randomList;
      }, 500);
    },

    /*#endregion*/

    /*#region 数据提交事件*/
    submitData(row, callback) {
      console.log(row);
      setTimeout(() => {
        console.log(454545);
        callback(true);
      }, 1000);
    },
    deleteData(row, callback) {
      this.$confirm("是否删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          setTimeout(() => {
            console.log(565656);
            callback(true);
          }, 1000);
            // callback(true);
        })
        .catch(() => {
          callback(false);
        });
    },

    /*#endregion*/

    /*#region 操作函数(handle)*/
    handleAdd(callback) {
      // this.list.push(Mock.user.get);
      // const items = ["one", "two", "three", "four"];
      // items.splice(1, 0, "hello");
      // console.log(items);
      // this.list.push({
      //   id: 0,
      //   name: null,
      //   age: null,
      //   sex: null
      // });
      callback({
        id: 0,
        name: null,
        age: null,
        sex: null
      });
    },
    handleSelectionChange(val) {
      console.log(val);
    },
    handleSubmit(row, callback) {
      console.log(row, "submit");
      setTimeout(() => {
        callback(false);
      }, 60000);
      // callback(false);
    },
    handleSubmitAll() {
      // console.log(this.$refs.list);
      this.$refs.list && this.$refs.list.validate((validate) => {
        console.log(validate, "总验证");
      });
    },
    handleCancelAll() {
      this.$refs.list && this.$refs.list.resetFields((validate) => {
        console.log(validate, "总取消");
      });
    },
    handleCancelAllSelection() {
      this.$refs.list && this.$refs.list.clearSelection();
    },
    handleToggleSelection() {
      this.$refs.list && this.$refs.list.toggleRowSelection(this.list[0]);
      // this.$refs.list && this.$refs.list.toggleAllSelection();
    },
    handleChange(value, row, event) {
      row.name = Math.random();
      console.log(value, row, event, "xtInputValue");
    },
    handleCheckBoxChange(value) {
      console.log(value, "handleCheckBoxChange");
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleClick() {
      console.log("handleClick", this.aaaa);
      this.dynamicTags.push("标签" + this.dynamicTags.length);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      console.log("handleClose");
    },
    handleEdit(scope, row) {
      console.log(scope.rowConfig.edit);
      this.$refs.list.toggleOperation("edit", row, {...scope.rowConfig, edit: true}, true);
      // console.log(scope, row);
    },
    handleCancel(scope, row) {
      //修改行内编辑状态
      //参数：事件类型（delete，success ）等， 行内数据， scope.rowConfig（设置edit： true）， 编辑状态， callback， 是否需要callback返回
      this.$refs.list.toggleOperation("cancel", row, {...scope.rowConfig, edit: true}, !scope.rowConfig.edit, () => {
        console.log("handleCancel");
      }, true);
    },
    handleFocus(value, row, event) {
      console.log(value, row, event, "handleFocus");
    },
    handleBlur(value, row, event) {
      console.log(value, row, event, "handleBlur");
    },
    handleInput(value, row, event) {
      row.age=Math.random();
      console.log(value, row, event, "handleInput");
    }

    /*#endregion*/

    /*#region 获取数据*/

     /*#endregion*/

  },

  /*#region 生命周期函数(created、mount、等)*/
  created() {
    const list = Mock.user.list;
    this.list = list;
    console.log(this.list);
    setTimeout(() => {
      this.materialList = Mock.material.list;
    }, 500);
  },
  mounted() {
    console.log(this);
  },

  /*#endregion*/

  /*#region 注册绑定数据*/

  components: {
  },
  data() {
    const RollerCode = (rule, value, callback) => {
      console.log(value, "RollerCode");
      callback();
    };
    const cityOptions = ["上海", "北京", "广州", "深圳"];
    return {
      aaaa: 0,
      name: null,
      list: [],
      rules: {
        name: [{required: true, message: "请输入性别啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦", trigger: "blur"}, {validator: RollerCode, trigger: "blur"}],
        sex: {required: true, message: "请输入性别", trigger: "blur"},
        age: [{required: true}]
      },
      materialList: [],
      loading: {selectLoading: false},
      xtInputValue: null,

      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,

      dynamicTags: ["标签一", "标签二", "标签三"],

      selectValue: null,
      options: [{
        value: "选项1",
        label: "黄金糕"
      }, {
        value: "选项2",
        label: "双皮奶"
      }, {
        value: "选项3",
        label: "蚵仔煎"
      }, {
        value: "选项4",
        label: "龙须面"
      }, {
        value: "选项5",
        label: "北京烤鸭"
      }]
    };
  }

  /*#endregion */

};
</script>
<style scoped lang="scss">
  .app{
    padding: 10px;
  }
</style>
